<template>
  <mt-popup v-model="popupVisible" position="right" :modal="false" style="width:100%;height:100%;">
    <div class="page">
      <div class="scroll-view">
        <customHeader middleTitle="收款来源" @leftCallBack="popupHide" />
        <div class="page-body" style="background:#fff;overflow-y: hidden;">
          <div class="page ordersource-component all">
            <div class="section-container">
              <ul class="tab-bar">
                <li
                  class="checked"
                  :key="index"
                  v-for="(item,index) in tabCompent4.tabList"
                  @click="toggleTab(tabCompent4,index)"
                  :class="{selected:index == tabCompent4.tabIndex}"
                >{{item}}</li>
              </ul>
            </div>
            <div class="scroll-container">
              <div class="section" v-if="0 == tabCompent4.tabIndex">
                <ul class="table">
                  <li>
                    <div>收银员</div>
                    <div>实收金额(元)</div>
                    <div>笔数</div>
                  </li>
                </ul>
                <div
                  class="scroll-wrap"
                  v-infinite-scroll="loadMore"
                  infinite-scroll-disabled="loading"
                  infinite-scroll-distance="30"
                >
                  <ul class="table">
                    <li :key="index" v-for="(item,index) in dataList0">
                      <div v-html="item.staticsName"></div>
                      <div>{{ item.totalPayAmt }}</div>
                      <div>{{ item.totalOrderCnt }}</div>
                    </li>
                    <p v-show="loading" class="page-infinite-loading">
                      <mt-spinner :style="{display:'inline-block'}" type="fading-circle"></mt-spinner>
                    </p>
                    <div v-show="noMore&&!loading&&dataList0.length!==0" class="no-more">
                      <span>已经全部加载完毕</span>
                    </div>
                  </ul>
                  <div v-show="!loading&&dataList0.length===0" class="no-more">
                    <span>暂无数据</span>
                  </div>
                </div>
              </div>
              <div class="section chart-wrap" v-if="1 == tabCompent4.tabIndex">
                <ul class="table">
                  <li>
                    <div>收款码</div>
                    <div>实收金额(元)</div>
                    <div>笔数</div>
                  </li>
                </ul>
                <div
                  class="scroll-wrap"
                  v-infinite-scroll="loadMore"
                  infinite-scroll-disabled="loading"
                  infinite-scroll-distance="30"
                >
                  <ul class="table">
                    <li :key="index" v-for="(item,index) in dataList1">
                      <div v-html="item.staticsName"></div>
                      <div>{{ item.totalPayAmt }}</div>
                      <div>{{ item.totalOrderCnt }}</div>
                    </li>
                    <p v-show="loading" class="page-infinite-loading">
                      <mt-spinner :style="{display:'inline-block'}" type="fading-circle"></mt-spinner>
                    </p>
                    <div v-show="noMore&&!loading&&dataList1.length!==0" class="no-more">
                      <span>已经全部加载完毕</span>
                    </div>
                  </ul>

                  <div v-show="!loading&&dataList1.length===0" class="no-more">
                    <span>暂无数据</span>
                  </div>
                </div>
              </div>
              <div class="section chart-wrap" v-if="2 == tabCompent4.tabIndex">
                <ul class="table">
                  <li>
                    <div>设备</div>
                    <div>实收金额(元)</div>
                    <div>笔数</div>
                  </li>
                </ul>
                <div
                  class="scroll-wrap"
                  v-infinite-scroll="loadMore"
                  infinite-scroll-disabled="loading"
                  infinite-scroll-distance="30"
                >
                  <ul class="table">
                    <li :key="index" v-for="(item,index) in dataList2">
                      <div v-html="item.staticsName"></div>
                      <div>{{ item.totalPayAmt }}</div>
                      <div>{{ item.totalOrderCnt }}</div>
                    </li>
                    <p v-show="loading" class="page-infinite-loading">
                      <mt-spinner :style="{display:'inline-block'}" type="fading-circle"></mt-spinner>
                    </p>
                    <div v-show="noMore&&!loading&&dataList2.length!==0" class="no-more">
                      <span>已经全部加载完毕</span>
                    </div>
                  </ul>
                  <div v-show="!loading&&dataList2.length===0" class="no-more">
                    <span>暂无数据</span>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </mt-popup>
</template>

<script>
import Vue from "vue";
import { Toast } from "mint-ui";
import customHeader from "../../components/header/header";
export default {
  name: "orderSource",
  data() {
    return {
      popupVisible: false,
      filterParams: this.orderSourceParam,
      loading: false,
      noMore: false,
      tabCompent4: { tabList: ["收银员", "收款码", "设备"], tabIndex: 0 },
      dataList0: [],
      dataList1: [],
      dataList2: [],
      currentPage0: 1,
      currentPage1: 1,
      currentPage2: 1,
      staticsType: 2,
    };
  },
  props: {
    orderSourceParam: {
      type: Object
    },
    orderSourceTab: {
      type: Object
    },
  },
  methods: {
    popupShow() {
      this.popupVisible = true;
      this.currentPage0 = 1;
      this.currentPage1 = 1;
      this.currentPage2 = 1;
      this.getOrderSource();
    },
    popupHide() {
      this.popupVisible = false;
    },
    toggleTab(tabCompent, index) {
      tabCompent.tabIndex = index;
      let type = 2;
      if (index === 0) {
        type = 2;
      } else if (index === 1) {
        type = 3;
      } else if (index === 2) {
        type = 1;
      }
      this.staticsType = type;
      if (this['dataList' + index].length == 0) {
        this.getOrderSource();
      }
    },
    //无限加载
    loadMore() {
      if (this.loading || this.noMore || !this.popupVisible) {
        return;
      }
      this.getOrderSource();
    },
    //多维度查询订单汇总接口
    getOrderSource() {
      //staticsType 统计类型：0 未知； 1、机具SN标识；2：收银员ID；3：收款码
      let tabIndex = this.tabCompent4.tabIndex;
      let currentPage = this["currentPage" + tabIndex];
      if (currentPage == 1) {
        this["dataList" + tabIndex] = [];
      }
      const staticsType = this.staticsType;
      let param = { staticsType: staticsType, startDate: this.filterParams.startDate, endDate: this.filterParams.endDate, currentPage: currentPage, pageSize: 10 };
      if (this.filterParams.shopId && this.filterParams.shopId != "all") {
        param.shopIds = [this.filterParams.shopId];
      }
      this.loading = true;
      this.ajax({
        url: "/newapp/statistics/queryBusinessDataMoreChoise.do",
        type: "post",
        data: param,
        controlLoading: false,
      })
        .then(res => {
          this.loading = false;
          this.noMore = true;
          if (res.success && res.resultObject) {
            if (res.resultObject.dataList.length > 0) {
              res.resultObject.dataList = res.resultObject.dataList.map((item) => {
                let name = "";
                if (staticsType == 2) {
                  name = item.staticsName ? `<div>${item.staticsName}</div>` : "<div>其他</div>";
                } else if (staticsType == 3) {
                  name = item.staticsName || item.staticsId ? `<div>${item.staticsName ? item.staticsName : ""}<p></p>id:${item.staticsId}</div>` : "<div>其他</div>";
                } else if (staticsType == 1) {
                  name = item.staticsName || item.staticsId ? `<div>${item.staticsName ? item.staticsName : ""}<p></p>sn:${item.staticsId}</div>` : "<div>其他</div>";
                }
                item.staticsName = name;
                return item;
              });
              this["dataList" + tabIndex] = this["dataList" + tabIndex].concat(res.resultObject.dataList);
            }
            if (this["dataList" + tabIndex].length < res.resultObject.totalCount) {
              this.noMore = false;
              this["currentPage" + tabIndex]++;
            }
          } else {
            this.noMore = true;
            Toast(res.msg);
          }
        })
        .catch((err) => {
          this.noMore = true;
          this.loading = false;
        });
    },
  },
  watch: {
    orderSourceParam(newVal, oldVal) {
      if (JSON.stringify(newVal) !== JSON.stringify(oldVal)) {
        this.filterParams = newVal;
        this.currentPage0 = 1;
        this.currentPage1 = 1;
        this.currentPage2 = 1;
      }
    },
    orderSourceTab(newVal, oldVal) {
      if (JSON.stringify(newVal) !== JSON.stringify(oldVal)) {
        this.tabCompent4.tabIndex = newVal.index;
        this.staticsType = newVal.type;
      }
    },
  },
  created() {

  },
  components: {
    customHeader,
  }
};
</script>
<style lang='scss' scoped>
@import "storeCompare";
</style>
